<template>
  <div class="sidebar">
    <el-space direction="vertical" :size="20" class="sidebar-content">
      <!-- 头像 -->
      <div class="avatar-section">
        <el-card
          class="tech-card avatar-card animate__animated animate__bounceIn"
          shadow="never"
          data-aos="zoom-in"
          data-aos-delay="100"
        >
          <div class="avatar-container">
            <img
              src="~~assets/imgs/background.jpg"
              class="avatar animate__animated animate__pulse animate__infinite animate__slower"
            >
            <div class="avatar-glow"/>
          </div>
        </el-card>
      </div>

      <!-- 位置信息 -->
      <el-card
        class="tech-card info-card animate__animated animate__fadeInLeft"
        shadow="never"
        data-aos="fade-left"
        data-aos-delay="200"
      >
        <template #header>
          <div class="card-header">
            <MapPinIcon class="header-icon" />
            <span>位置信息</span>
          </div>
        </template>
        <div class="info-content">
          <span class="location-text">{{ resData.location }}</span>
        </div>
      </el-card>

      <!-- 技能标签云 -->
      <el-card
        class="tech-card tags-card animate__animated animate__fadeInUp"
        shadow="never"
        data-aos="fade-up"
        data-aos-delay="300"
      >
        <template #header>
          <div class="card-header">
            <TagsIcon class="header-icon" />
            <span>技能标签</span>
          </div>
        </template>
        <el-space wrap :size="8">
          <el-tag
            v-for="(tag, i) of resData.tags"
            :key="i"
            size="small"
            :color="tagsColor[i]"
            effect="dark"
            class="animate__animated animate__bounceIn"
            :class="`animate__delay-${i % 3 + 1}s`"
            data-aos="zoom-in"
            :data-aos-delay="400 + i * 50"
          >
            {{ tag }}
          </el-tag>
        </el-space>
      </el-card>

      <!-- 时间轴 -->
      <el-card
        class="tech-card timeline-card animate__animated animate__fadeInRight"
        shadow="never"
        data-aos="fade-right"
        data-aos-delay="400"
      >
        <template #header>
          <div class="card-header">
            <ClockIcon class="header-icon" />
            <span>时间轴</span>
          </div>
        </template>
        <el-timeline>
          <el-timeline-item
            v-for="(time, i) of resData.timeline"
            :key="i"
            :timestamp="time.time"
            placement="top"
            :color="time.color || 'var(--primary-color)'"
            class="animate__animated animate__fadeInUp"
            :class="`animate__delay-${i + 1}s`"
            data-aos="fade-up"
            :data-aos-delay="500 + i * 100"
          >
            {{ time.title }}
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </el-space>
  </div>
</template>

<script setup>
import { MapPinIcon, TagsIcon, ClockIcon } from 'lucide-vue-next'

import { resData, tagsColor } from './data'
</script>

<style lang="scss" scoped>
.sidebar {
  padding: 20px;
  height: 100%;
  background: var(--bg-secondary);
}

.sidebar-content {
  width: 100%;
}

/* 头像卡片 */
.avatar-card {
  text-align: center;

  .avatar-container {
    display: flex;
    justify-content: center;

    .avatar {
      position: relative;
      z-index: 2;
      width: 100px;
      height: 100px;
      border: 3px solid var(--primary-color);
      border-radius: 50%;
    }

    .avatar-glow {
      position: absolute;
      inset: -8px;
      background: var(--primary-color);
      border-radius: 50%;
      opacity: 0.3;
      filter: blur(12px);
      animation: glow 3s ease-in-out infinite alternate;
    }
  }
}

/* 卡片头部样式 */
.card-header {
  display: flex;
  align-items: center;
  gap: 8px;

  .header-icon {
    width: 18px;
    height: 18px;
    color: var(--primary-color);
  }

  span {
    font-weight: 600;
    color: var(--text-primary);
  }
}

/* 信息内容 */
.info-content {
  .location-text {
    font-size: 14px;
    color: var(--text-secondary);
  }
}

/* 标签样式 */
.tags-card {
  :deep(.el-space) {
    width: 100%;
  }
}

/* 时间轴样式 */
.timeline-card {
  :deep(.el-timeline) {
    padding-left: 0;

    .el-timeline-item__timestamp {
      font-size: 12px;
      color: var(--text-secondary);
    }

    .el-timeline-item__content {
      font-size: 14px;
      color: var(--text-primary);
    }
  }
}

/* 动画效果 */
@keyframes glow {
  from {
    opacity: 0.2;
    transform: scale(0.95);
  }

  to {
    opacity: 0.4;
    transform: scale(1.05);
  }
}

/* 响应式设计 */
@media (width <= 768px) {
  .sidebar {
    padding: 16px;
}

  .avatar-card .avatar-container .avatar {
    width: 80px;
    height: 80px;
  }
}

@media (width <= 480px) {
  .sidebar {
    padding: 12px;
}

  .avatar-card .avatar-container .avatar {
    width: 60px;
    height: 60px;
  }
}
</style>
